﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section head{
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/flot/excanvas.min.js")"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="@Url.Content("~/Scripts/flot/jquery.flot.min.js")"></script>
    <script src="@Url.Content("~/Scripts/utils/datejs_lang/date-ro-RO.js")" type="text/javascript"></script>
    <script type="text/javascript">


        $(function () {

            var days = [];

            for (var i = 1; i <= 7; i++) {
                var date = Date.today();
                days.push([i, date.addDays(-i).toString("dd MMMM")]);
            }

            var options = {
                lines: { show: true },
                points: { show: true },
                xaxis: { ticks: days },
                grid: { hoverable: true},
            };
            var placeholder = $('#placeholder');

            function onDataReceived(series) {
                $.plot(placeholder, [{data: series[0], label: 'Afisari'}, {data: series[1], label: 'Click-uri'}], options);
            }

            $.plot(placeholder, [], options);

            $.ajax({
                url: '@Url.Action("GetData", "Chart")',
                method: 'GET',
                dataType: 'json',
                success: onDataReceived
            });

            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y + 5,
                    left: x + 5,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#fee',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }

            var previousPoint = null;
            $("#placeholder").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    showTooltip(item.pageX, item.pageY,
                        item.series.label + ": " + item.series.xaxis.ticks[item.dataIndex].label + " - " + y);
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        });
    </script>
}
<h2>
    Chart</h2>
<div id="placeholder" style="width: 600px; height: 300px;">
</div>
